<template>
  <div>
    <el-table
      v-if="tableActive === 1"
      :data="testData1"
      row-key="procode"
      border
      style="width: 100%"
      max-height="500"
      :row-style="tableStyle"
      :header-row-style="headerStyle"
      highlight-current-row
      @row-click="clickProject"
    >
      <el-table-column align="center" prop="id" label="工号" width="100" />
      <el-table-column align="center" prop="banci" label="班次" width="150" />
      <el-table-column align="center" prop="first" label="首次打卡时间" />
      <el-table-column
        align="center"
        prop="end"
        label="末次打卡时间"
        width="150"
      />
      <el-table-column align="center" prop="didian" label="打卡地点" />
      <el-table-column align="center" prop="state" label="状态" />
      <!-- <el-table-column
        align="center"
        prop="proprovince"
        label="省份"
        width="150"
      /> -->
      <!-- <el-table-column align="center" prop="procity" label="城市" width="150" /> -->
      <!-- <el-table-column align="center" prop="proaddress" label="地址" /> -->
    </el-table>
    <el-table
      v-if="tableActive === 2"
      :data="testData2"
      row-key="procode"
      border
      style="width: 60%"
      max-height="500"
      :row-style="tableStyle"
      :header-row-style="headerStyle"
      highlight-current-row
      @row-click="clickProject"
    >
      <el-table-column align="center" prop="id" label="工号" width="250" />
      <el-table-column align="center" prop="name" label="姓名" width="250" />
      <el-table-column
        align="center"
        prop="shengyu"
        label="剩余假期"
        width="150"
      />
    </el-table>
    <el-table
      v-if="tableActive === 3"
      :data="testData3"
      row-key="procode"
      border
      style="width: 100%"
      max-height="500"
      :row-style="tableStyle"
      :header-row-style="headerStyle"
      highlight-current-row
      @row-click="clickProject"
    >
      <el-table-column align="center" prop="name" label="姓名" width="100" />
      <el-table-column align="center" prop="id" label="工号" width="150" />
      <el-table-column align="center" prop="start" label="请假开始日期" />
      <el-table-column align="center" prop="end" label="请假结束日期" />
      <el-table-column align="center" prop="state" label="流程状态" />
    </el-table>
  </div>
</template>

<script>
import { getStageProjectListApi } from "@/api/index";
export default {
  props: {
    tableData: {
      type: Array,
      default: null,
    },
    open: {
      type: Function,
      default: null,
    },
    tableActive: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    tableActive(nv, ov) {
      console.log(nv, ov);
    },
  },
  data() {
    return {
      tableStyle: {
        background: "none",
        width: "150px",
      },
      headerStyle: {
        color: "black",
        fontSize: "16px",
      },
      testData1: [
        {
          id: "100101",
          name: "赵雨潇",
          banci: "标准班次",
          first: "2023-08-14 09:00",
          end: "2023-08-14 18:20",
          didian: "龙域中心",
          state: "正常",
        },
        {
          id: "100082",
          name: "张南",
          banci: "标准班次",
          first: "2023-08-14 08:43",
          end: "2023-08-14 19:25",
          didian: "天津黄骅港",
          state: "正常",
        },
        {
          id: "100106",
          name: "赵淑娟",
          banci: "标准班次",
          first: "2023-08-14 09:00",
          end: "2023-08-14 18:20",
          didian: "龙域中心",
          state: "正常",
        },
        {
          id: "100105",
          name: "贾敬宇",
          banci: "标准班次",
          first: "2023-08-14 09:00",
          end: "2023-08-14 17:20",
          didian: "龙域中心",
          state: "正常",
        },
        {
          id: "100106",
          name: "许奥浛",
          banci: "标准班次",
          first: "2023-08-14 09:00",
          end: "2023-08-14 09:20",
          didian: "龙域中心",
          state: "矿工",
        },
      ],
      testData2: [
        {
          id: "100101",
          name: "赵雨潇",
          shengyu: "5.5",
        },
        {
          id: "100082",
          name: "张南",
          shengyu: "3",
        },
        {
          id: "100074",
          name: "郭通",
          shengyu: "4.5",
        },
        {
          id: "100075",
          name: "刘海锋",
          shengyu: "3.5",
        },
        {
          id: "100076",
          name: "姜祺",
          shengyu: "2.5",
        },
        {
          id: "100077",
          name: "程飞",
          shengyu: "6.5",
        },
        {
          id: "100078",
          name: "刘占炎",
          shengyu: "8",
        },
        {
          id: "100079",
          name: "于星",
          shengyu: "7.5",
        },
        {
          id: "100080",
          name: "魏欣",
          shengyu: "3.5",
        },
        {
          id: "100081",
          name: "周俐伟",
          shengyu: "2.5",
        },
      ],
      testData3: [
        {
          name: "侯中堂",
          id: "100031",
          start: "2023-08-01 09:00",
          end: "2023-08-01 19:30",
          state: "审批中",
        },
        {
          name: "侯中堂",
          id: "100031",
          start: "2023-08-01 09:00",
          end: "2023-08-02 12:00",
          state: "已驳回",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    clickProject(row, column, event) {
      console.log("行点击----->", row, column, event);
      this.open(row);
    },
  },
};
</script>

<style lang="scss" >
.el-table {
  /* border: 1px solid red; */
  background: #f5f6fa;
}

.has-gutter > tr > :last-child {
  /* background: red; */
}

.el-table__row:hover {
  cursor: pointer;
}

.el-table__body-wrapper {
  overflow-y: scroll;
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  opacity: 0.2;
  background: fade(rgb(78, 182, 214), 60%);
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: fade(rgb(78, 182, 214), 30%);
}
</style>